<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="static/lib/editormd/css/editormd.min.css"/>
  <script src="static/lib/editormd/editormd.min.js"></script>

</head>
<body>
<div class="dialog">
  <!-- 弹窗内容 -->
  <div class="content">
    <div class="aclose">
      <span>提示</span>
      <a class="close" href="javascript:close();">&times;</a>
    </div>
    <div class="contain">

    </div>
    <div class="footer" style="gap: 20px">
      <button class="el-button button--primary" type="button" onclick="tclose()">确定</button>
      <button class="el-button button--default" type="button" onclick="tclose()">取消</button>

    </div>
  </div>
</div>
  <div class="main flex flex--column">
    <div class="artical-bar flex flex--row flex--align-center" style="width: 100%;height: 56px; overflow: hidden">
      <div class="article-bar_link-box flex flex--row flex--align-center" style="width: 88px; height: 25px;line-height:25px; cursor: pointer;gap: 7px;margin: 24px 5px 24px 24px ">
        <img src="static/img/返回.png" style="width: 19px ;height: 17px">
        <div style="font-size: 18px; color: #73767a;font-weight: normal;cursor: pointer;" onclick=jump()>返回</div>
      </div>
      <div class="article-bar__input-box"
           style="display: flex;
           width: 100%;
           margin: 8px 16px 8px 8px;
           border: 1px solid #ccc;
           border-radius: 21px;
           background-color: #fff;
           position: relative;">
      <input maxlength="100" placeholder="请输入文章标题（5~100个字）" class="article-bar__title--input" id="articleTitle"
             style="width: 100%;margin-left: 4px;border-radius: 18px;padding: 8px;padding-right: 88px;ont-size: 18px;line-height: 24px;background-color: #fff;border: 0;outline:none;font-size: 20px">
      </div>
      <div class="article-bar__user-box flex flex--row" style="padding: 8px 32px 8px 0px">
        <button class="btn btn-save" onclick="writeArticle()">发布文章</button>
      </div>
    </div>
    <div id="text">
      <textarea id="articleContent" style="display:none;">
#### Disabled options
      </textarea>
    </div>
  </div>


</body>
</html>
<script>
    var flag = false;
    function show(str){
        var show = $(".dialog").css("display");
        $(".contain").text(str);
        $(".dialog").css("display",show =="none"?"block":"none");
    }
    function close(){
        var show = $(".dialog").css("display");
        $(".dialog").css("display",show =="none"?"block":"none");
        if(flag === true){
            window.location.href = "/boke_war_exploded/Main.html?userid=" + urlMessage.userid + "&state=" + urlMessage.state;
        }
    }
    function tclose(){
        var show = $(".dialog").css("display");
        $(".dialog").css("display",show =="none"?"block":"none");
        if(flag === true){
            window.location.href = "/boke_war_exploded/Main.html?userid=" + urlMessage.userid + "&state=" + urlMessage.state;
        }
    }
    function jump(){
        window.location.href="/boke_war_exploded/Main.html?userid=" + urlMessage.userid +"&state=" + urlMessage.state;
    }
    var testEditor;
    $(function() {
        testEditor = editormd("text", {
            width   : "99%" ,
            height  : 800,
            syncScrolling : "single",
            path    : "static/lib/editormd/lib/"
        });

    });

    var url = decodeURI(location.search);
    var dd = url.split("?")
    if(url.indexOf("?") != -1){
        str = url.substr(1);
        strs = str.split("&");
    }
    let urlMessage ={}
    for(let i = 0 ; i < strs.length; i ++) {
        let split = strs[i].split("=")
        urlMessage[split[0]] = split[1]
    }


    function writeArticle(){
        if($("#articleContent").val() ==="" || $("#articleTitle").val() ===""){
            show("标题或者内容不能为空")
            return;
        }
        if( urlMessage.state === '2'){
            show("您已被禁言");
            return
        }
        $.ajax({
            type: "Get",
            url: "writeArticleServlet",
            data: {
                "userID": urlMessage.userid,
                "articleContent": $("#articleContent").val(),
                "articleTitle":$("#articleTitle").val()
            },
            dataType:"text",
            success: function(data){
                flag = true;
                show("内容发布成功！")
            }
        });
    }
</script>
<style>
    .dialog {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 3000;

    }

    .dialog .content {
        display: flex;
        flex-direction: column;
        width: 500px;
        /*height: 300px;*/
        margin: 100px auto;
        background-color: #fefefe;
        /*border-radius: 10px;*/
    }
    .button--primary{
        color: #fff !important;
        background-color: #409eff !important;
        border-color: #409eff !important;
    }
    .button--primary:hover{
        background-color: #79bbff !important;
        border-color: #79bbff !important;
    }
    .button--default:hover{
        background-color: #ecf5ff;
        border-color:  #d9ecff;
        color:  #79bbff;
    }
    .el-button{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
    .dialog .aclose{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px 10px;
    }
    .dialog .aclose span{
        line-height: 24px;
        font-size: 18px;
        color: #303133;
    }
    .dialog .contain{
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }

    .dialog .close {
        color: #aaa;
        margin-right: 15px;
        font-size: 25px;
        font-weight: normal;
        text-decoration: none;
    }
    .dialog .close:hover {
        color: dodgerblue;
    }
    .dialog .footer{
        padding: 10px 20px 20px;
        display: flex;
        flex-direction: row-reverse;

    }

    body{
        margin: 0px;
        background-color: #f4f4f5;
    }
    .flex{
        display: flex;
    }
    .flex--row{
        flex-direction: row;
    }
    .flex--column{
        flex-direction: column;
    }
    .flex--align-center{
        align-items: center;
    }
    button{
        cursor: pointer
    }
    .article-bar__user-box .btn-save {
        margin-right: 16px;
        padding: 8px 16px;
        font-size: 16px;
        color: #fc5531;
        border: 1px solid #fc5531;
        border-radius: 18px;
        white-space: nowrap;
        background-color: #fff;
        font-size: 20px;

    }
</style>